<!--
 * @Author: lizilong 94648929@qq.com
 * @Date: 2022-11-12 16:55:04
 * @LastEditors: lizilong 94648929@qq.com
 * @LastEditTime: 2022-12-22 01:33:17
 * @FilePath: \sofast-admin\src\views\account\LoginView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { TencentQq, Wechat, Lark, FeelgoodOne, GithubOne } from '@icon-park/vue-next'
import type { FormInstance, FormRules } from 'element-plus'
import { useRouter } from "vue-router";

const router = useRouter();


const loginFormRef = ref<FormInstance>()

const loginFormRules = reactive<FormRules>({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'change' },
  ],
  pswd: [
    { required: true, message: 'Please input pswd', trigger: 'change' }
  ],
})

// do not use same name with ref
const loginForm = reactive({
  name: "admin",
  pswd: "123456",
  check: true,
  read: true,
});

const onSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      router.push({ path: "/home" });
    } else {
      // eslint-disable-next-line no-undef
      ElMessage({
        type: 'warning',
        message: '请填写正确的用户名及密码',
      })
      console.log('error submit!', fields)
    }
  })
}
</script>

<template>
  <div class="h-full w-full flex justify-center items-center">
    <div class="login-box w-4/5 sm:w-1/2 md:w-4/5 lg:w-3/5 xl:w-1/2 2xl:w-2/5">
      <div class="login-title mb-10 text-4xl">欢迎登陆</div>
      <div class="login-form">
        <el-form :model="loginForm" ref="loginFormRef" :rules="loginFormRules" label-width="0" size="large"
          :show-message="false" inline-message status-icon>
          <el-form-item prop="name">
            <el-input v-model="loginForm.name" placeholder="用户名/邮箱" prefix-icon="User" />
          </el-form-item>
          <el-form-item prop="pswd">
            <el-input v-model="loginForm.pswd" placeholder="密码" type="password" show-password prefix-icon="Lock" />
          </el-form-item>
          <el-form-item>
            <div class="flex justify-between w-full h-full">
              <div>
                <el-checkbox v-model="loginForm.check">{{
                $t("account.remember")
                }}</el-checkbox>
              </div>
              <div>
                <el-link type="primary" :underline="false" @click="() => {
                  router.push({ path: '/account/register' })
                }">{{ $t("account.goRegister") }}</el-link>
                <el-divider direction="vertical" />
                <el-link type="primary" :underline="false" @click="() => {
                  router.push({ path: '/account/forget' })
                }">{{ $t("account.forgot") }}</el-link>
              </div>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="w-full" auto-insert-space @click="onSubmit(loginFormRef)">{{
            $t("account.login")
            }}
            </el-button>
          </el-form-item>
          <el-form-item class="m-0">
            <el-checkbox v-model="loginForm.read"><span>阅读并接受</span></el-checkbox>
          </el-form-item>
          <el-form-item>
            <div class="w-full">
              <el-divider>
                <span class="text-gray-400">第三方登录</span>
              </el-divider>
              <div>
                <div class="flex justify-center items-center lineheight-def">
                  <a class="pswd btn track-btn" href="javascript:void(0);" title="短信" data-v-b3a1f529="">
                    <feelgood-one theme="outline" size="24" fill="#333" />
                  </a>
                  <a class="pswd btn track-btn" href="javascript:void(0);" title="QQ" data-v-b3a1f529="">
                    <tencent-qq theme="outline" size="24" fill="#333" />
                  </a>
                  <a class="pswd btn track-btn" href="javascript:void(0);" title="微信" data-v-b3a1f529="">
                    <wechat theme="outline" size="24" fill="#333" />
                  </a>
                  <a class="pswd btn track-btn" href="javascript:void(0);" title="飞书" data-v-b3a1f529="">
                    <lark theme="outline" size="24" fill="#333" />
                  </a>
                  <a class="pswd btn track-btn" href="javascript:void(0);" title="Github" data-v-b3a1f529="">
                    <github-one theme="outline" size="24" fill="#333" />
                  </a>
                </div>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style>
.btn {
  width: 38px;
  height: 38px;
  padding: 5px;
  background-color: #ffffff;
  border: 1px solid #d6d6d6;
  border-radius: 3px;
  box-sizing: border-box;
  vertical-align: middle;
  cursor: pointer;
  margin-left: 10px;
  margin-right: 10px;
  line-height: 26px;
}
</style>
